<template>
  <div class="content">
      <ul class="flex-box">
        <li><span>卡号：</span></li>
        <li><input maxlength="20" v-model="account" type="text" placeholder="请输入银行卡账号"></li>
        <li><img class="more-icon" @click="empty()" v-if="isShow" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <ul class="flex-box">
        <li><span>持卡人：</span></li>
        <li><input maxlength="30" v-model="account_name" type="text" placeholder="请输入持卡人姓名"></li>
        <li><img class="more-icon" @click="empty1()" v-if="isShow1" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
       <ul class="flex-box">
        <li><span>开户银行：</span></li>
        <li><input maxlength="8" readonly v-model="account_bank" type="text" placeholder="开户银行"></li>
        <li></li>
      </ul>
     <div class="tc"><button ref="btn" class="common-btn" @click="next ()">下一步</button></div>
  </div>
</template>

<script>
import { bankcardList } from './../../../common/fetch.js'
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      account: '',
      account_name: '',
      account_bank: '',
      reg: /\d{15}|\d{19}/,
      isShow: false,
      isShow1: false,
      isShow2: false,
      isNext: false,
      name_reg: /[\u4e00-\u9fa5]/,
      isReg: false
    }
  },
  mounted () {
  },
  updated () {
    if (this.account.length > 0) {
      this.isShow = true
    } else {
      this.isShow = false
    }
    if (this.account_name.length > 0) {
      this.isShow1 = true
    } else {
      this.isShow1 = false
    }
    if (this.account_bank.length > 0) {
      this.isShow2 = true
    } else {
      this.isShow2 = false
    }
    if (this.isShow === true && this.isShow1 === true && this.isShow2 === true) {
      this.$refs.btn.style.opacity = '1'
      this.isNext = true
    } else {
      this.$refs.btn.style.opacity = '0.5'
      this.isNext = false
    }
  },
  methods: {
    empty () {
      this.account = ''
    },
    empty1 () {
      this.account_name = ''
    },
    empty2 () {
      this.account_bank = ''
    },
    next () {
      if (this.isNext === true) {
        if ( this.isReg === true) {
            if (this.name_reg.test(this.account_name) === true) {
            this.$apiPost(`user_account_add`, {'account': this.account, 'account_name':this.account_name, 'account_bank': this.account_bank,'types': '0'}
            ).then((data) => {
              if (data.msg === 'success') {
                MessageBox.alert('银行卡账户已经绑定成功', '提示').then(() => {
                  this.$router.push('/present_set')
                })
              } else {
                MessageBox.alert('系统繁忙，请稍后重试', '提示')
              }
            })
          } else {
            MessageBox.alert('请输入中文格式的用户名称', '提示')
          }
        } else {
          MessageBox.alert('银行卡账户格式不正确', '提示')
        }
      } else {
         MessageBox.alert('填写信息不完整，请补全信息', '提示')
      }
    } 
  },
  watch: {
    account (newA, oldA) {
      if (newA.slice(0, 1) === '6') {
          bankcardList.map((item,index) => {
          item.patterns.map((items,i) => {
              var regs = items.reg
            if (items.reg.test(newA) === true) {
              this.account_bank = item.bankName
              this.isReg = true
            }
          }) 
        })
      } else {
        this.isReg = false
      }
      if (newA.length < 12) {
        this.account_bank = ''
      }
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
